<template>
    <div ref="ech" id="box">
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props: {
    },
    data() {
        return {};
    },
    methods: {
        handleSearch() {
            // 三 局部使用
            // 1 初始化echarts,获取dom元素
            let myChart = echarts.init(this.$refs.ech);
            // 2 配置图表和数据
            let option = {
                legend: {
                    top: "90%",
                    itemWidth: 10,
                    itemHeight: 10,
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize: "12"
                    }
                },
                tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                // 注意颜色写的位置
                color: [
                    "#006cff",
                    "#60cda0",
                    "#ed8884",
                    "#ff9f7f",
                    "#0096ff",
                    "#9fe6b8",
                    "#32c5e9",
                    "#1d9dff"
                ],
                series: [
                    {
                        name: "点位统计",
                        type: "pie",
                        // 如果radius是百分比则必须加引号
                        radius: ["10%", "70%"],
                        center: ["50%", "42%"],
                        roseType: "radius",
                        data: [
                            { value: 20, name: "西安" },
                            { value: 26, name: "北京" },
                            { value: 24, name: "上海" },
                            { value: 25, name: "其他" },
                            { value: 20, name: "武汉" },
                            { value: 25, name: "杭州" },
                            { value: 30, name: "深圳" },
                            { value: 42, name: "广州" }
                        ],
                        // 修饰饼形图文字相关的样式 label对象
                        label: {
                            fontSize: 10
                        },
                        // 修饰引导线样式
                        labelLine: {
                            // 连接到图形的线长度
                            length: 10,
                            // 连接到文字的线长度
                            length2: 10
                        }
                    }
                ]
            };
            // 3 将配置好的图表加到dom元素上面
            myChart.setOption(option);

            // 4 图表的响应式.嵌套宽度必须设置%
            window.addEventListener("resize", () => {
                myChart.resize();
            })
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.handleSearch();
        })
    },
}
</script>

<style>
#box {
    height: 100%;
    width: 100%;
}
</style>